<template>
<div>
  <ul>
      <!-- params 传参的时候to只能 name  不能用path-->
      <li v-for="message in messageList" :key="message.id">
          <router-link 
          :to="{
              name:'xiangqing',
              params:{
                    id:message.id,
                    title:message.title
              } 
              
          }"
          >{{message.title}}
          </router-link>
          <button @click="abc(message)">点击查看详细信息</button>
      </li>
  </ul>
  <hr>
  <router-view></router-view>
  </div>
</template>

<script>
export default {
    name:'Message',
    data(){
        return {
            messageList:[
					{id:'001',title:'消息001'},
					{id:'002',title:'消息002'},
					{id:'003',title:'消息003'}
				]
        }
    },
    methods:{
        // 编程式路由和其他组件一起使用能发起路由的跳转
        abc(message){
            this.$router.push({
                name:'xiangqing',
                params:{
                    id:message.id,
                    title:message.title
                }
            })
        }
    }
}
</script>

<style>

</style>